<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/shop_Single.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>

	</head>
	<body>
		<!-- 头部 -->
		<herder>
			<!-- 头部导航栏区域 -->
			<div class="container  py-3 d-flex  justify-content-between flex-md-row flex-column">
				<ul class="list-unstyled d-flex mx-md-0 mx-auto">
					<li>
						<a href="#" class="fa fa-user nav_color">
							<i class="text-muted">Login</i>
						</a>
					</li>
					<li class="mx-3">
						<a href="#" class="fa fa-pencil nav_color">
							<i class="text-muted">Register</i>
						</a>
					</li>
					<li>
						<a href="#" class="fa fa-cart-plus nav_color">
							<i class="text-muted">Checkout</i>
						</a>
					</li>
				</ul>

				<ol class="list-unstyled d-flex mx-md-0 mx-auto ">
					<li class="mx-3">
						<a href="#" class="fa fa-heart nav_color">
							<i class="text-muted">Wishlist</i>
						</a>
					</li>

					<li>
						<a href="#" class="fa fa-angle-down nav_color ">
							<i class="text-muted">USD</i>
						</a>
					</li>
				</ol>

			</div>


			<!-- 头部导航栏搜索框区域 -->
			<div class="" style="background-image: url(images/header_bg.jpg);">

				<div class=" " style="background-color: rgba(0,0,0,0.8);">

					<div class="container py-4">

						<ul class="d-flex justify-content-between align-items-center flex-md-row flex-column mb-0 pl-0">

							<li class="">
								<a href="#"><img src="images/logo.png" class="w-100"></a>
							</li>

							<li class="form_qu">
								<form class="form-control d-flex justify-content-between " style=" height: 50px; padding-top: 4px; padding-right: 2px;">
									<input type="text" placeholder="Search" class="border-0" style="outline: none;">
									<button type="" class="border-0 text-muted btn" style="background-color: #E4606D; width: 55px; height: 40px; "><i
										 class="fa fa-search text-white"></i></button>

								</form>
							</li>
						</ul>

					</div>


				</div>

			</div>

			<!-- 头部导航栏分栏 -->
			<div class="w-100 nav_tou " style="background-color: #E4606D;">

				<div class="navbar navbar-expand-md p-0">
					<button type="button " class="navbar-toggler bg-white ml-auto" data-toggle="collapse" data-target="#meu" style="color: white;">
						<i class="fa fa-bars " style="background-color: #E4606D;"></i>
					</button>


					<div class="collapse navbar-collapse " id="meu">
						<ul class=" list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav "
						 style="">
							<li class="nav-item">
								<a href="index.html" class="nav-link ">Home</a>
							</li>
							<li class="nav-item ">
								<a href="about.html" class="nav-link ">About</a>
							</li>
							<li class="nav-item  ">
								<a href="services.html" class="nav-link ">Services</a>
							</li>
							<li class="nav-item  ">
								<a href="gallery.html" class="nav-link ">Gallery</a>
							</li>
							<li class="nav-item  ">
								<a href="blog.html" class="nav-link ">Blog</a>
							</li>
							<li class="nav-item  ">
								<a href="shop.html" class="nav-link defoult">Shop</a>
							</li>
							<li class="nav-item  ">
								<a href="contact.html" class="nav-link ">Contact</a>
							</li>

						</ul>
					</div>

				</div>
			</div>

		</herder>

		<!-- 中部区域 -->
		<main>

			<!-- 中部雪人区域 -->
			<div class="col-12 pl-0 pr-0 py-5" style="background-image: url(images/choose_bg.jpg);">
				<div class=" py-5 w-100 " style="background-color: rgba(0,0,0,0.3); background: repeat; ">
					<div class=" text-center">
						<h2 class="m-0" style="color: #E4606D;">Shop Single</h2>
						<hr class="" style="width: 105px; background-color: #E4606D; margin-top: 1px;">
						<hr class="" style="width: 65px; background-color: #E4606D; margin-top: -12px">
						<p style="color: #E4606D;">Home<i class="text-dark"> / Shop Single</i></p>
					</div>
				</div>
			</div>

			<!-- 中部详情部分 -->
			<div class="">
				<div class="container ">
					<ul class="row">
						<li class="col-lg-9 col-12  py-5">
							<!-- 美女图片区域 -->
							<ul class="row pl-0">
								<li class="col-lg-5 col-12 overflow-hidden p-0 ">
									<img src="images/shop_product.jpg" class="w-100 h-100 img_fan">
								</li>

								<li class="col-lg-7 col-12 pl-4 pr-4">

									<p class="font-weight-bold m-0" style="font-size: 20px;">Hand Made Jewellery</p>

									<p class="text-muted" style="margin-top: 10px; margin-bottom: 10px;">$ 20.00</p>

									<div class="" style="margin-bottom: 10px;">
										<i class="fa fa-star text-warning "></i>
										<i class="fa fa-star text-warning "></i>
										<i class="fa fa-star text-warning "></i>
										<i class="fa fa-star text-warning "></i>
										<i class="fa fa-star text-warning "></i>
									</div>

									<p>But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and
										I will give you a complete account of the system, and expound the actual teachings of the great explorer of
										the truth, the master-builder of human happiness.Neque porro quisquam est, qui dolorem ipsum quia dolor sit
										amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam
										aliquam quaerat voluptatem. Ut enim ad minima veniam.</p>
									<!-- 增加减区域 -->
									<div class="d-flex  align-items-center">

										<ul class="pl-0 pagination">
											<li class="page-item">
												<a href="#" class="page-link dda"></a>
											</li>
											<li class="page-item">
												<a href="#" class="page-link ">2</a>
											</li>
											<li class="page-item">
												<a href="#" class="page-link ove"></a>
											</li>

										</ul>

										<a href="#" class="btn_a " style="margin-left: 11px;">Decoration</a>

										<a href="#" class="nav_o"><i class="fa fa-heart-o text-white"></i></a>

									</div>

									<p style="margin-top: 11px;">Categories:&nbsp;<a href="#" style="color: #E4606D; text-decoration: none; ">
											knitted hats, Tank tops</a></p>

								</li>
							</ul>


							<!-- 发言评论选项卡区域 -->
							<ul class=" nav nav-tabs mt-5">
								<li class="nav-item">
									<a href="#one" class="nav-link active " data-toggle='tab'>Description</a>
								</li>

								<li class="nav-item">
									<a href="#two" class="nav-link " data-toggle='tab'>Reviews(1)</a>
								</li>
							</ul>

							<div class="tab-content">
								<div class="tab-pane active  w-100" id="one">
									<p class="text-muted">On the other hand, we denounce with righteous indignation and dislike men who are so
										beguiled and demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot
										foresee the pain and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty
										through weakness of will, which is the same as saying through shrinking from toil and pain. These cases are
										perfectly simple and easy to distinguish.</p>
								</div>



								<div class="tab-pane  fade w-100" id="two">
									<!-- 显示第二部分内容 -->
									<div class="">

										<h5 class="font-weight-bold mt-3">2 REVIEWS FOUND</h5>

										<ul class="row pl-0 mt-4">
											<li class=" col-2">
												<img src="images/author-1.jpg" class="w-100">
											</li>

											<li class=" col-10 border ">

												<div class="mt-3">
													<i class="fa fa-star text-warning "></i>
													<i class="fa fa-star text-warning "></i>
													<i class="fa fa-star text-warning "></i>
													<i class="fa fa-star text-warning "></i>
													<i class="fa fa-star  "></i>
												</div>

												<p class="text-muted">Admin - june 20，2018</p>

												<p class="text-muted">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium
													voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
													provident.</p>

											</li>


										</ul>

									</div>

									<!-- 提交框部分 -->
									<h5 class="font-weight-bold mt-4">ADD A REVIEW</h5>

									<div class="d-flex flex-md-row flex-column justify-content-between">

										<div class="btn_text mt-2">
											<p class="mb-0">Name*</p>
											<input type="text" name="" class="w-100" />
										</div>

										<div class="btn_text mt-2">
											<p class="mb-0">Emiail*</p>
											<input type="text" name="" class=" w-100" />
										</div>

									</div>


									<div class="d-flex flex-md-row flex-column justify-content-between">

										<div class="btn_text mt-2">
											<p class="mb-0">Website*</p>
											<input type="text" name="" class="w-100" />
										</div>

										<div class="btn_text mt-2">
											<p class="mb-0">Bating*</p>

											<!-- 评论五角星 -->
											<ul class="pl-0 d-flex align-items-center">
												<li style="margin-right: 10px;" class="a_xing">
													<a href="#" class="fa fa-star"></a>
												</li>

												<li style="margin-right: 10px;" class="a_xing">
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
												</li>

												<li style="margin-right: 10px;" class="a_xing">
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
												</li>

												<li style="margin-right: 10px;" class="a_xing">
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
												</li>

												<li class="a_xing">
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
													<a href="#" class="fa fa-star"></a>
												</li>
											</ul>

										</div>

									</div>

									<!-- 大量评论区域 -->
									<div class=" mt-2">
										<p class="mb-0">Your Review</p>

										<textarea rows="5" cols="" class="text_text"></textarea>

									</div>

									<!-- 按钮区域 -->
									<a href="#" class="btn_a mt-3 ">ADD REVIEW</a>

								</div>


							</div>

							<!-- 三个图标 -->
							<p class="font-weight-bold mt-5" style="font-size: 23px; color: #E4606D;">Related<i class="text-dark"> Products</i></p>


							<ul class="pl-0 row">
								<li class="col-lg-4 col-12 py-3 ">

									<img src="images/pro2.jpg" class="w-100">

									<div class="bg-white py-3 " style="background-color: #E4606D !important;">
										<i class="font-weight-bold d-block text-center" style="font-size: 22px; color: white;">Showcase</i>

										<div class="text-center">
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
										</div>


										<p style="font-size: 16px; color: white;" class="text-center">Iorem Ipsum has been the industry's standard
											dummy text ever since the 1500s</p>


									</div>

								</li>

								<li class="col-lg-4 col-12 py-3 ">

									<img src="images/pro3.jpg" class="w-100">

									<div class="bg-white py-3 " style="background-color: #E4606D !important;">
										<i class="font-weight-bold d-block text-center" style="font-size: 22px; color: white;">Ladies Purse</i>

										<div class="text-center">
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
										</div>


										<p style="font-size: 16px; color: white;" class="text-center">Iorem Ipsum has been the industry's standard
											dummy text ever since the 1500s</p>


									</div>

								</li>

								<li class="col-lg-4 col-12 py-3 ">

									<img src="images/pro4.jpg" class="w-100">

									<div class="bg-white py-3 " style="background-color: #E4606D !important;">
										<i class="font-weight-bold d-block text-center" style="font-size: 22px; color: white;">Wooden Showcase</i>

										<div class="text-center">
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
											<i class="fa fa-star text-warning "></i>
										</div>


										<p style="font-size: 16px; color: white;" class="text-center">Iorem Ipsum has been the industry's standard
											dummy text ever since the 1500s</p>


									</div>

								</li>
							</ul>
						</li>

						<div class="col-lg-3 col-12 py-3">

							<form class="form-control  d-flex justify-content-between" style=" height: 50px;">
								<input type="text" placeholder="Search" class="border-0" style="outline: none;">
								<button type="" class="border-0 btn text-muted" style="background-color: white;"><i class="fa fa-search"></i></button>
							</form>


							<!-- 发表言论区域 -->
							<h5 class="pt-3">BLOG CATEGORIES</h5>

							<hr style="width: 40px; background-color: #E4606D; height: 1px;" class="ml-0">


							<!-- 购物单区域 -->
							<ul class="list-unstyled">
								<!-- 一 -->
								<li class="a_tiao">
									<a href="#" style="text-decoration: none; color: gray; " class=" d-block ">Funky Jewelry
										<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">10</span>
										<hr class="w-100 text-muted">
									</a>

								</li>

								<!-- 二 -->
								<li class="a_tiao">
									<a href="#" style="text-decoration: none; color: gray;" class=" d-block ">Knitted Hats
										<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">35</span>
										<hr class="w-100 text-muted">
									</a>

								</li>

								<!-- 三 -->
								<li class="a_tiao">
									<a href="#" style="text-decoration: none; color: gray; " class=" d-block ">Homemade Soap
										<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">40</span>
										<hr class="w-100 text-muted">
									</a>

								</li>

								<!-- 四 -->
								<li class="a_tiao">
									<a href="#" style="text-decoration: none; color: gray; " class=" d-block ">Birthday Cards
										<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">10</span>
										<hr class="w-100 text-muted">
									</a>

								</li>

								<!-- 五 -->
								<li class="a_tiao">
									<a href="#" style="text-decoration: none; color: gray;" class=" d-block ">Tank Tops
										<span style="color: #E4606D; float: right;" class="d-block font-weight-bold">8</span>
										<hr class="w-100 text-muted">
									</a>

								</li>

							</ul>


							<!-- 大量小图片区域 -->
							<h5 class="pt-3">INSTAGRAM</h5>

							<hr style="width: 40px; background-color: #E4606D; height: 1px;" class="ml-0">

							<ul class="row list-unstyled">
								<li class="col-3  img_p ">
									<a href="#"><img src="images/insta1.jpg" class="w-100"></a>
								</li>

								<li class="col-3  img_p">
									<a href="#"><img src="images/insta2.jpg" class="w-100"></a>
								</li>

								<li class="col-3 img_p ">
									<a href="#"><img src="images/insta3.jpg" class="w-100"></a>
								</li>

								<li class="col-3  img_p">
									<a href="#"><img src="images/insta4.jpg" class="w-100"></a>
								</li>

								<li class="col-3 mt-3 img_p">
									<a href="#"><img src="images/insta5.jpg" class="w-100"></a>
								</li>

								<li class="col-3 mt-3  img_p">
									<a href="#"><img src="images/insta6.jpg" class="w-100"></a>
								</li>

								<li class="col-3 mt-3 img_p">
									<a href="#"><img src="images/insta7.jpg" class="w-100"></a>
								</li>

								<li class="col-3 mt-3 img_p">
									<a href="#"><img src="images/insta8.jpg" class="w-100"></a>
								</li>


							</ul>

							<!-- 多个点击按钮的区域 -->
							<h5 class="pt-3">PRODUCT TAGS</h5>

							<hr style="width: 40px; background-color: #E4606D; height: 1px;" class="ml-0">


							<div class="d-flex flex-row justify-content-around  flex-wrap">
								<a href="#" class="btn_a mt-3 ">Craft</a>

								<a href="#" class="btn_a mt-3  ">Decoration</a>

								<a href="#" class="btn_a mt-3 ">Diy</a>

								<a href="#" class="btn_a mt-3 ">Fashion</a>

								<a href="#" class="btn_a mt-3 ">Lifestyle</a>

								<a href="#" class="btn_a mt-3 ">General</a>
							</div>


						</div>
					</ul>
				</div>
			</div>

		</main>

		<!-- 底部区域 -->
		<footer class="">
			<!-- 五个轮播图区域 -->
			<div class="w-100 " style="background-color: #E4606D;">

				<div class="container">

					<ul class="row d-flex justify-content-center justify-content-sm-center text-center m-0 pl-0">
						<li class="col-12  py-4 ">

							<span class="font-weight-bold text-center d-block text-center " style="color: white; font-size: 30px;">Our
								Clients</span>

						</li>
						<li class="col-md-2  col-12  py-4 ">
							<a href="#"><img src="./images/partner1.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner2.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner3.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4 ">
							<a href="#"><img src="./images/partner4.png"></a>
						</li>
						<li class="col-md-2 col-12  py-4">
							<a href="#"><img src="./images/partner5.png"></a>
						</li>
					</ul>

				</div>

			</div>

			<!-- 尾部的导航栏区域 -->
			<div class="" style=" background-color: black;">

				<div class="container">

					<ul class="row m-0 pl-0">
						<li class="col-lg-4 col-md-6 col-12   py-5" style="background-color: black;">

							<img src="images/logo.png" class="">

							<p class="text-white  mt-4" style="font-size: 18px;">It is a long established fact that a reader will be
								distracted by the readable content of a page when looking at its layout.</p>



						</li>
						<li class="col-lg-2 col-md-6 col-12 " style="background-color: black;">
							<p class=" font-weight-bold mt-5" style="font-size: 19px; margin: 0px; color:  #E4606D;">Help</p>


							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Your Beer</p>
								</a>
								<a href="#">
									<p>Customer Service</p>
								</a>
								<a href="#">
									<p>Contact</p>
								</a>
								<a href="#">
									<p>Recent Orders</p>
								</a>

							</div>


						</li>
						<li class="col-lg-2 col-md-6 col-12  py-5" style="background-color: black; margin: 0px;">
							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Links</p>

							<div class="text-white mt-3 footer_text">
								<a href="#">
									<p>Home</p>
								</a>
								<a href="#">
									<p>Shop</p>
								</a>
								<a href="#">
									<p>404 Page</p>
								</a>
								<a href="#">
									<p>Login</p>
								</a>
							</div>

						</li>
						<li class="col-lg-4 col-md-6 col-12 py-5 " style="background-color: black;">

							<p class=" font-weight-bold " style="font-size: 19px; margin: 0px; color:  #E4606D;">Our Information</p>

							<div class="">
								<i class="fa fa-map-marker  mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">787 Lakeview St. Marion, NC
								</p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; 28752 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-phone t mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">+1800123654789 </p>
								<p class="text-white">&nbsp;&nbsp;&nbsp; +1800123456788 </p>
								<p></p>

							</div>

							<div class="">
								<i class="fa fa-envelope mt-3" style="color:  #E4606D;"></i>
								<p class="d-inline-block ml-2" style="font-size: 16px; margin: 0px; color: white;">Support@Handmade.Net</p>
								<p></p>

							</div>
						</li>
					</ul>

				</div>

			</div>


			<!-- 尾部的底部介绍区域-->
			<ul class="row m-0 p-0">
				<li class="col-md-6 col-12 py-3 text-center " style="background-color:#E4606D ;">
					<p class="text-white mt-2">Copyrights © 2018 All Rights <a href="#" style="color: blue;" class="a_se">Reserved</a>
						by Himanshusofttech</p>
				</li>

				<li class="col-md-6 col-12 text-center py-3 " style="background-color:#E4606D ;">
					<i class="fa fa-facebook text-white d-block mt-3">
						<i class="fa fa-twitter ml-3"></i>
						<i class="fa fa-google-plus ml-3"></i>
						<i class="fa fa-pinterest-p ml-3"></i>
						<i class="fa fa-linkedin ml-3"></i>
					</i>
				</li>
			</ul>
		</footer>
	</body>
</html>
